<template>
  <div class="basic-dialog">
    <q-dialog v-model="innerVisible" persistent :maximized="isToFullScreen">
      <q-card v-drag :style="isfullStyle" class="scrollbar">
        <q-card-section class="dialog-title bg-primary" style="position:relative">
          <div class="absolute text-white" v-if="titleTips !== ''">
            <span class="text-ellipsis font-size-14" style="width: 300px">
              {{titleTips}}
            </span>
          </div>
          <div class="text-center text-white">{{title || ''}}</div>
          <div class="basic-dialog-btn">
            <slot name="dialog-btn"></slot>
            <q-btn style="font-size: 18px;color: white"
                  v-if="isFullScreen"
                  flat
                  round
                  dense
                  class="iconfont  white basic-btn"
                  :class="isToFullScreen ? 'icontubiao-17' : 'icontubiao-14'"
                  @click=" isToFullScreen= !isToFullScreen" />
            <q-btn style="font-size: 18px;color: white"
                   v-if="isShowClose"
                   flat
                   round
                   dense
                   class="iconfont icontubiao-67 white basic-btn"
                   @click="onClose" />
          </div>
        </q-card-section>
        <div style="overflow: auto" :style="{'max-height': contentHeight}" class="scrollbar">
          <slot></slot>
        </div>
        <q-separator v-if="isShowBasicFooter" style="width:100%" :class="{'margin-t-10':hasFooterMargin}"/>
        <div v-if="isShowBasicFooter" class="text-center form-inline" style="display:block;padding: 10px 20px">
          <q-btn class="q-mr-md" outline color="primary" :loading="loading" @click="onClose">
            <span>取消</span>
          </q-btn>
            <q-btn
            label="确认"
            :disable="submitDisable"
            :loading="loading"
            color="primary"
            unelevated
            @click="submit"/>
        </div>
        <q-inner-loading :showing="isShowInnerLoading" style="z-index: 99">
            <q-spinner-gears size="50px" color="primary" />
        </q-inner-loading>
      </q-card>
    </q-dialog>
  </div>
</template>

<script>
// import _ from 'lodash'
export default {
  name: 'basic-dialog',
  props: {
    visible: Boolean,
    minWidth: {
      type: String,
      default: '500px'
    },
    maxWidth: {
      type: String,
      default: 'auto'
    },
    maxHeight: {
      type: String,
      default: '700px'
    },
    title: {
      type: String
    },
    titleTips: {
      type: String,
      default: ''
    }, // 标题提示语
    isShowClose: {
      type: Boolean,
      default: false
    },
    isFullScreen: {
      type: Boolean,
      default: false
    },
    isShowBasicFooter: { // 是否需要确认取消按钮
      type: Boolean,
      default: false
    },
    hasFooterMargin: {
      type: Boolean,
      default: true
    },
    loading: Boolean, // 确认取消按钮loading
    submitDisable: { // 确认按钮禁用
      type: Boolean,
      default: false
    },
    isShowInnerLoading: Boolean // 弹窗全局loading ,调用接口获取信息
  },
  computed: {
    innerVisible: {
      get () {
        return this.visible
      },
      set (val) {
        this.$emit('update:visible', val)
      }
    },
    isfullStyle () {
      return this.isToFullScreen ? { minWidth: '100%', maxHeight: '100%' } : { minWidth: this.minWidth, maxHeight: this.maxHeight, maxWidth: this.maxWidth }
    },
    contentHeight () {
      return (parseInt(this.maxHeight) - 40) + 'px'
    }
  },
  watch: {
    // 全屏的时候防止错乱, 定位归零
    isToFullScreen (val) {
      const dragDom = document.querySelector('.q-card__section').parentNode
      dragDom.style.top = 0
      dragDom.style.left = 0
    }
  },
  data () {
    return {
      isToFullScreen: false
    }
  },
  mounted () {
  },
  methods: {
    onClose () {
      this.isToFullScreen = false
      this.$emit('close')
    },
    submit () {
      this.$emit('submit')
    }
  }
}
</script>

<style lang="scss">
  .max-full-width{
    max-width: 100%;
  }
  .basic-dialog-btn{
    position: absolute;
    right: 5px;
    top: 0px;
    .basic-btn{
      height: 36px;
      width: 36px;
      min-width: auto;
      min-height: auto;
      margin: 2px;
    }
  }
</style>
